<template>
  <section class="team-list"  v-loading="loading">
      <div  class="team-box" v-for="team in list" :key="team.id">
        <div class="team-content">
          <div class="team-hover">
            <div>详情</div>
            <el-button type="text" @click="enterBtn(team)">进入公司</el-button>
          </div>
          <div class="team-name">
            {{team.name}}
          </div>
        </div>
      </div>
      <div class="team-box team-content" @click="addBtn">
        <i class="el-icon-plus" />
      </div>
      <el-dialog :visible.sync="editDialog" v-if="editDialog" title="编辑" >
        <edit-team :teamForm="currTeam" v-on:cancel="cancelEvt"></edit-team>
      </el-dialog>
  </section>
</template>

<script>
  // import {mapActions,mapGetters} from 'vuex'
  import editTeam from './editTeam'
  import { createNamespacedHelpers } from 'vuex'
  const { mapState, mapActions } = createNamespacedHelpers(process.env.VUE_APP_MODULE_TITLE)
  export default {
    name: "teamList",
    components:{editTeam},
    data(){
      return{
        loading:false,
        list:[],
        editDialog:false,
        currTeam:null,
        modeModule:[{
          id:1,moduleList:[
            {id:1,name:'系统管理'},
            {id:2,name:'账户管理'},
            {id:3,name:'员工管理'}
            ]},
          {id:7,moduleList:[
            {id:2,name:'账户管理'},
            {id:3,name:'员工管理'},
            {id:4,name:'商铺管理'}
          ]}
        ],
      }
    },
    computed:{
      ...mapState({
        modeTeamList:state=>state.modeTeamList
      })
    },
    created(){
      console.log('什么情况----------',this.modeTeamList)
      this.list=JSON.parse(JSON.stringify(this.modeTeamList))
    },
    methods:{
      enterBtn(team){
        console.log('看看进入哪个公司--------------',team.id)
        this.getTeamModuleList(team.id)
        // this.$router.push('/module-management/'+team.id)
      },
      getTeamModuleList(id){
        let index = this.modeModule.findIndex(m=>m.id === id)
        if(index <0){
          alert('该公司无模块资源')
          return
        }
        console.log(window['eap-commons'])
      },
      addBtn(){
        console.log('添加一个新公司')
        this.currTeam={name:'新建一个公司',data:{}}
        this.editDialog=true
      },
      cancelEvt(){
        console.log('新建或更新完毕------------')
        //重新获取team列表
        this.editDialog=false
        this.currTeam=null
        this.getTeamList()
      },
      getTeamList(){
        // /global/team/list
      },
    }
  }
</script>

<style scoped>
.team-list{
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  border:0px solid red;
}
.team-box{
  border: 0px solid blue;
  margin: 10px;
  width: 280px;
}
.team-box:hover .team-hover{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 280px;
  background-color: #cd8c95cc;
  /* border: 1px solid black; */
  /* top:-10px; */
  height:100px;
  position: absolute;
  color: black;
  border-radius: 10px;
}
.team-content{
  /* width: 100%; */
  cursor: pointer;
  height:100px;
  /* border: 1px solid #FFE4E1; */
  background-color: #FFE4E1;
  color: #F08080;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center
}
.team-hover{
  display: none;
}
.el-icon-plus{
  font-size: 30px
}
</style>
